<template>
    <div class="post-item-footer">
        <div class="row body">
            <div class="like btn" @click="onLikeWeibo">
                <img
                    v-if="isLiked || scene === 'liked'"
                    :src="require('@/assets/icon/community_like_active.png')"
                    class="icon"
                />
                <img
                    v-else
                    :src="require('@/assets/icon/community_like.png')"
                    class="icon"
                />
            </div>

            <div class="like btn" @click="onCommentClick">
                <img
                    :src="require('@/assets/icon/community_comment.png')"
                    class="icon"
                />
            </div>

            <div class="like btn">
                <img
                    :src="require('@/assets/icon/community_forward.png')"
                    class="icon"
                />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        item: Object,
        scene: String
    },
    data() {
        return {};
    },

    computed: {
        isLiked() {
            return this.item.likes.find(likeUser => {
                return likeUser.uid === this.$store.state.userInfo.uid;
            });
        }
    },

    methods: {
        onCommentClick() {
            this.$emit("click-comment");
        },
        onLikeWeibo() {
            this.$emit("click-like");
        }
    }
};
</script>


<style lang="less" scoped>
.post-item-footer {
    padding: 10px 0 20px 0;
    .body {
        width: 100%;

        .btn {
            flex: 0 0 auto;
            width: 33.3333%;
            text-align: center;

            .icon {
                width: 40px;
            }
        }
    }
}
</style>